<template>
  <div class="m-products-list">
    <dl>
      <dd
        v-for="item in nav"
        :key="item.name"
        :class="[item.name,item.acitve?'s-nav-active':'']"
        @click="navSelect"
      >{{ item.txt }}
      </dd>
    </dl>
    <el-divider></el-divider>

    <Item/>

    <el-divider></el-divider>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000" style="text-align: center; margin-bottom: 10px">
    </el-pagination>
  </div>
</template>

<script>
import Item from './product.vue'

export default {
  components: {
    Item
  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      nav: [
        {
          name: 's-default',
          txt: '智能排序',
          acitve: true
        }, {
          name: 's-price',
          txt: '价格最低',
          active: false
        }, {
          name: 's-visit',
          txt: '人气最高',
          active: false
        }, {
          name: 's-comment',
          txt: '评价最高',
          active: false
        }
      ]
    }
  },
  async asyncData({app}) {
    let {data} = await app.$axios.get('searchList')
    return {items: data.list}
  },
  methods: {
    navSelect: function () {
      console.log('select')
    }
  }
}
</script>

<style lang="scss">


.m-products-list {
  width: 1240px;
  margin: 0 auto;
  box-sizing: border-box;
  margin-top: 10px;
  background: #FFF;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  color: #333;
  font-size: 14px;
  line-height: 20px;
  padding: 11px 20px;

  > dl {
    dd {
      width: 96px;
      height: 20px;
      display: inline-block;
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;
      margin-top: 15px;

      &.s-nav-active {
        color: #31BCAD;
      }
    }

    padding-bottom: 2px;

    .s-price {
      position: relative;

      &:before,
      &:after {
        content: " ";
        position: absolute;
        right: 8px;
        top: 0;
        border: 4px solid transparent;
        border-bottom-color: #ddd;
        width: 0;
        height: 0;
      }

      &:after {
        top: 12px;
        border-bottom-color: transparent;
        border-top-color: #ddd;
      }
    }
  }

  > ul {
    list-style: none;
    padding: 11px 0;
  }
}

.m-product-categroy {
  padding: 15px 20px 0;
  background: #FFF;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.classic {
  display: flex;
  padding-bottom: 10px;

  > dt {
    width: 80px;

    &:nth-child(2) {
      border-radius: 100px;
      background: #13D1BE;
      color: #FFF;
      height: 22px;
      line-height: 22px;
      width: 40px;
      box-sizing: border-box;
      margin-right: 40px;
      text-align: center;
    }
  }

  &:nth-child(1) {
    dd {
      border-bottom: 1px solid #ddd;
    }
  }
}

.m-product-select {
  padding-bottom: 5px;
  min-width: 120px;

  .tab {
    position: relative;

    dt {
      font-size: 14px;
      line-height: 24px;
    }

    dd {
      &:before {
        content: ' ';
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent transparent #E5E5E5;
        border-style: solid;
        border-width: 5px;
        top: -11px;
      }

      &:after {
        content: ' ';
        position: absolute;
        top: -8px;
        left: 16px;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent transparent #fff;
        border-style: solid;
        border-width: 4px;
      }

      display: none;
      top: 24px;
      width: 510px;
      background: #fff;
      position: absolute;
      cursor: auto;
      user-select: text;
      white-space: normal;
      font-size: 12px;
      text-align: left;
      background: #FFF;
      border: 1px solid #E5E5E5;
      border-radius: 4px;
      padding: 19px 15px 9px;

      span {
        display: inline-block;
        min-width: 120px;
        line-height: 1.5;
        font-weight: 500;
      }

      h3 {
        color: #ccc;
        font-size: 16px;
        margin-bottom: 11px;
      }
    }

    &:hover {
      dd {
        display: block;
        z-index: 999;
      }
    }
  }
}

</style>
